<div *ngIf="showToc">
  <div class="markdown-toc">
    <div class="left-drawer" #leftContent>
      <div class="progress">
        <div class="left">
          <div #tocLeft [class.sticky]="sticky"></div>
        </div>
        <div class="toc right">
          <ul #toc [class.sticky]="sticky"></ul>
        </div>
      </div>
    </div>
    <div class="right-content" #render (scroll)="handleScroll($event)">
      <ledge-render [content]="data" *ngIf="data"
                    [virtualScroll]="virtualScroll"
                    [scrollToItem]="toItem"
                    (headingChange)="changeHeading($event)"
      >
      </ledge-render>
    </div>
  </div>
</div>

<div *ngIf="!showToc" class="no-toc-markdown" #render (scroll)="handleScroll($event)">
  <ledge-render [content]="data" *ngIf="data"></ledge-render>
</div>

<!--Scroll to top-->
<div class="scroll-to-top" [ngClass]="{'show-scrollTop': windowScrolled}" *ngIf="showScroll">
  <button mat-fab aria-label="home" (click)="scrollToTop()">
    <mat-icon>arrow_upward</mat-icon>
  </button>
</div>
